import React, { useState, useEffect } from 'react';
import { ConnectRC, connect, history } from 'umi';
import { ConnectState } from '@/models/connect';
import { UserModelState } from '@/models/modules/user';
import { Table, Avatar, Image } from 'antd';
import moment from 'moment';

import { getUserList } from '@/service/gitLab';

import styles from './index.less';

interface UserProps {
    index: UserModelState;
}

const columns: Array<any> = [
    {
        title: '序号',
        render: (text: any, row: any, index: number) => { return index + 1 },
        width: 70,
        align: 'center'
    },
    {
        title: '头像',
        dataIndex: 'avatar_url',
        width: 180,
        align: 'center',
        render: (text: any, row: any, index: number) => (<Avatar size={32}
            src={<Image src={text} />}
        />)
    },
    {
        title: '用户名',
        dataIndex: 'name',
        width: 80
    },
    {
        title: 'UserName',
        dataIndex: 'username',
        ellipsis: true,
        width: 180
    },
    {
        title: '状态',
        dataIndex: 'state',
        ellipsis: true,
        align: 'center',
        width: 100
    },
    {
        title: '链接',
        dataIndex: 'web_url',
        ellipsis: true,
        width: 300,
        render: (text: string) => <a href={text} target="_blank">{text}</a>,
    }
];

const UserPage: ConnectRC<UserModelState> = (props) => {
    const [loading, setLoading] = useState<boolean>(false);
    const [userList, setUserList] = useState<any>();


    useEffect(() => {
        getUserList().then((res) => {
            setUserList(res);
        });
    }, []);

    return (
        <div className={styles.user_layout}>
            <Table columns={columns} dataSource={userList} bordered scroll={{ y: 500 }} />
        </div>
    );
};

export default connect(({ index }: ConnectState) => ({
    index,
}))(UserPage);
